<template>
      <div class="files_preview">
    <div class="f_v_t active" v-if="!article_editor_show">
      <div class="f_v_t_left">
        <el-select class="my_el_select" style="width: 120px" v-model="articleIsRead" placeholder="全部">
          <el-option label="全部" value="2"></el-option>
          <el-option label="自己发布" value="1"></el-option>
          <el-option label="别人分享" value="0"></el-option>
        </el-select>
        <div class="f_s_w">
          <div class="f_s_icon"></div>
          <input type="search" v-model="articleSearchValue" @focus="historyFocus = true" placeholder="请输入关键字" />
          <img v-show="articleSearchValue.trim() != ''" @click.stop.prevent="articleSearchValue = ''" src="static/image/home/clear_icon.png" />
        </div>
        <el-date-picker class="my_el_select my_el_select_time" v-model="artTime" type="daterange" align="right" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :picker-options="$store.state.pickerOptions">
        </el-date-picker>
      </div>
      <div class="f_v_t_right">
        <div class="my_el_icon my_el_icon_r">
          <div @click.stop.prevent="articleTitleTimeFn(0)" class="lable">
            标题
          </div>
          <div class="lable_icon">
            <i @click.stop.prevent="articleTitleTimeFn(1)" :class="[
                        'caret-top',
                        { broadTitleTimeTop: articleTitleTime == 1 },
                      ]"></i>
            <i @click.stop.prevent="articleTitleTimeFn(2)" :class="[
                        'caret-bottom',
                        { broadTitleTimeBottom: articleTitleTime == 2 },
                      ]"></i>
          </div>
        </div>
        <div class="my_el_icon">
          <div @click.stop.prevent="articleTitleTimeFn(3)" class="lable">
            时间
          </div>
          <div class="lable_icon">
            <i @click.stop.prevent="articleTitleTimeFn(4)" :class="[
                        'caret-top',
                        { broadTitleTimeTop: articleTitleTime == 4 },
                      ]"></i>
            <i @click.stop.prevent="articleTitleTimeFn(5)" :class="[
                        'caret-bottom',
                        { broadTitleTimeBottom: articleTitleTime == 5 },
                      ]"></i>
          </div>
        </div>
      </div>
    </div>

    <article-list :list.sync="articleList" :articleSendList="articleSendList" :articleTotal="articleTotal" :articleSearchValue="articleSearchValue" :article_editor_show="article_editor_show"
      @setModalFirst="setModalFirst" @getArticleList="getArticleList" @changeEditor="changeEditor" @openLinkFn="openLinkFn" @revocationArticleFn="revocationArticleFn" @deleteArticleInit='deleteArticleInit'>
    </article-list>
    <div class="page_box" v-show="articleTotal > pageSize && !article_editor_show">
      <Page class="page_main" :total="articleTotal" show-total :current="files_cur" :page-size="pageSize" @on-change="pageChange"></Page>
      <div class="page_foot page_foot_broad">
        <div>跳转至</div>
        <input type="number" :max='max' :min="1" v-model.number="page_num" />页&nbsp;<button @click.stop.prevent="goPage">确定</button>
      </div>
    </div>
  </div>
</template>
           
<script>
import articleList from "./article_list.vue"; //文章列表
import tools from "@/utils/tools.js";
export default {
  data() {
    return {
      articleTotal: 0,
      articleList: [],
      page_num: 1,
      artTime: "",
      //   articleTitleTime: "", // 新增查询标题文章筛选
      historyFocus: false,
      articleSearchValue: "",
      articleIsRead: "2",
    };
  },
  methods: {
    // 文章搜索
    async articleSearchFn(num) {
      if (num) {
        // this.files_cur = num;
        this.$emit("update:files_cur", num);
      }

      await this.$nextTick();
      this.articleList = [];
      let pageSizeStart =
        this.files_cur == 1 ? 0 : (this.files_cur - 1) * this.pageSize;
      console.log(this.files_cur, pageSizeStart, 84);
      // 查询字段
      let info = this.articleSearchValue.replace(/\s+/g, "");
      // 查询时间
      let ct1 = "",
        ct2 = "";

      if (this.artTime) {
        let startTime = this.artTime[0];
        let endTime = this.artTime[1];
        ct1 = new Date(startTime).getTime();
        ct2 = new Date(endTime).getTime();
      }

      let startTimeS = ct1 ? `AND time >= '${ct1}'` : "";
      let endTimeS = ct2 ? `AND time <= '${ct2}'` : "";
      let valueS = info ? `AND articleTitle LIKE '%${info}%'` : "";
      let isReadS = "";
      switch (parseInt(this.articleIsRead)) {
        case 0: // 别人分享的
          isReadS = `AND sendId != '${this.myInfo.id}'`;
          break;
        case 1: // 自己分享的
          isReadS = `AND sendId = '${this.myInfo.id}'`;
          break;
        default:
          break;
      }
      let isTimeTitleS;
      switch (this.articleTitleTime) {
        case 5: // 时间正序
          isTimeTitleS = "time ASC";
          break;
        case 2: // 标题正序
          isTimeTitleS = "articleTitle ASC";
          break;
        case 1: // 标题倒序
          isTimeTitleS = "articleTitle DESC";
          break;
        default:
          // 默认时间倒序
          isTimeTitleS = "time DESC";
          break;
      }
      console.log('isTimeTitleS',isTimeTitleS)
      // 获取文章
      let getTotal, res;
      getTotal = this.operationalDatabase(
        `SELECT count(1) total FROM ${this.sqlTable.articleList} WHERE 1=1 ${startTimeS} ${endTimeS} ${valueS} ${isReadS};`,
        1
      );
      res = this.operationalDatabase(
        `SELECT * FROM ${this.sqlTable.articleList} WHERE 1=1 ${startTimeS} ${endTimeS} ${valueS} ${isReadS} ORDER BY ${isTimeTitleS} LIMIT '${pageSizeStart}', '${this.pageSize}';`,
        1
      );
      console.log(res, startTimeS, endTimeS, valueS, isReadS, 142);
      this.articleTotal = parseInt(getTotal.list[0].total);
      this.$emit("getPageNum", this.articleTotal);
      //   this.getPageNum(this.articleTotal);
      this.articleList = res.list || [];
      this.articleList.map((item) => {
        item["isRecal"] = false;
      });

      this.$forceUpdate();
    },
    //index --->1为搜索,其他不需要参数
    operationalDatabase(statements, index) {
      let to = JSON.stringify({
        Sqlstr: statements,
      });
      return arguments[1]
        ? JSON.parse(this.$shellSQL(to, index))
        : JSON.parse(this.$shellSQL(to));
    },
    pageChange(a, b) {
      this.$emit("pageChange", a);
    },
    goPage() {
      this.articleSearchFn(this.page_num);

      // this.$emit("goPage");
    },
    revocationArticleFn(e) {
      this.$emit("revocationArticleFn", e);
    },
    deleteArticleInit(e) {
      this.$emit("deleteArticleInit", e);
    },
    openLinkFn(e) {
      this.$emit("openLinkFn", e);
    },
    changeEditor(e) {
      this.$emit("changeEditor", e);
    },
    getArticleList() {
      this.articleSearchFn();
    },
    setModalFirst(e) {
      this.$emit("setModalFirst", e);
    },
    articleTitleTimeFn(choose) {
        // this.articleTitleTime = index;
      this.$emit("update:articleTitleTime", choose);
      console.log('选择',choose)
      this.$emit("initPage");
      //   this.initPage();
    },
  },
  watch: {
    articleSearchValue() {
      this.$emit("initPage");
    },
    page_num(val, oVal) {
      // 新增广播/我的收藏/文章分页

      console.log(val, this.articleTotal, 202);
      this.$emit("getPageNum", this.articleTotal);

      // let num = Math.floor(this.articleTotal / this.pageSize);
      // if (val >= num) {
      //   this.page_num = oVal;
      // }

      //  this.getPageNum(this.articleTotal);
    },
    articleIsRead() {
      this.$emit("initPage");
    },
    artTime() {
      this.articleSearchFn();
    },
  },
  computed: {
    max() {
      return Math.ceil(this.articleTotal / this.pageSize);
    },
  },
  components: {
    articleList,
  },
  props: [
    "article_editor_show",
    // "articleList",
    "articleSendList",
    // "articleTotal",
    "articleTitleTime",
    "pageSize",
    "files_cur",
    "myInfo",
    "sqlTable",
  ],
};
</script>
<style scoped>
</style>
